<template>
    <div id="manage">
        <div class="type-statistics">
            <pie-graph-compts
                title-text="各类型下文章总数统计"
                name="文章总数"
                :data-info="typesInfo"
                :legend-data="typeLegendData"
            ></pie-graph-compts>
            <pie-graph-compts
                title-text="各种类型下点击次数统计"
                name="点击次数"
                :data-info="readingTimesInfo"
                :legend-data="typeLegendData"
            ></pie-graph-compts>
            <pie-graph-compts
                title-text="各种类型下评论次数统计"
                name="评论次数"
                :data-info="commentTotalInfo"
                :legend-data="typeLegendData"
            ></pie-graph-compts>
            <pie-graph-compts
                title-text="各种类型下点赞次数统计"
                name="点赞次数"
                :data-info="likesInfo"
                :legend-data="typeLegendData"
            ></pie-graph-compts>
        </div>
    </div>
</template>

<script>
    import pieGraphCompts from 'cmpts/pieGraphCompts';
    import { getStatistics } from 'assets/js/api';
    export default {
        components: {
            pieGraphCompts
        },
        data () {
            return {
                typesInfo: [],
                typeLegendData: [],
                readingTimesInfo: [],
                commentTotalInfo: [],
                likesInfo: []
            };
        },
        mounted () {
            this.getStatistics();
        },
        methods: {
            /**
             * 获取汇总数据
             */
            getStatistics () {
                getStatistics({}).then(res => {
                    let result = res.data;
                    this.typeLegendData = result.typeArr;
                    this.typesInfo = result.types;
                    this.readingTimesInfo = result.readingTimes;
                    this.commentTotalInfo = result.commentTotal;
                    this.likesInfo = result.likes;
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/manageCommon';
.type-statistics {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    overflow-x: hidden;
    padding: 30px 10px 0;
    &>div {
        width: 50%;
    }
}
</style>
